<script setup lang="ts">
import { codeFn, codeLoginFn, } from '@/api/login';
import { showToast, showNotify } from 'vant';
import { ref, type Ref } from 'vue';
import { useRouter } from 'vue-router';
const checked: Ref<boolean> = ref(false)
const tel: Ref<string> = ref('')
const code: Ref<string> = ref('')
const router = useRouter()
let codeText: Ref<string> = ref('发送验证码')
let count: Ref<number> = ref(60)

const isSending = ref(false);
function codeClick() {
    if (!isSending.value) {
        isSending.value = true; // 开始发送验证码  
        const timer = setInterval(() => {
            if (count.value > 0) {
                count.value--;
                codeText.value = count.value + 's后获取'
            } else {
                count.value = 60
                codeText.value = '重新获取'
                clearInterval(timer);
                isSending.value = false; // 停止发送验证码  
            }
        }, 1000);
        codeFn().then(res => {
            showToast('已发送' + res.data.data.data.telcode)
        })
    }
}

function loginClick() {
    codeLoginFn({
        tel: tel.value,
        code: code.value
    }).then(res => {

        if (res.data.code == 200) {

            if (checked.value == true) {
                showToast('登录成功')
                router.push({
                    name: 'mylogin'
                })
                localStorage.setItem('token', res.data.data.token)
                localStorage.setItem('isstate', res.data.data.isState)
            } else {
                showNotify({
                    message: '请先仔细阅读条款',
                    color: '#ad0000',
                    background: '#ffe1e1',
                });
            }

        } else {
            showToast('验证码错误')
        }
    })

}




</script>

<template>
    <div class="codelogin">
        <header class="mycode-back">

            <div class="back" @click="$router.back()">
                <svg t="1731383206890" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2340" width="18" height="18">
                    <path
                        d="M733.090909 977.454545a23.202909 23.202909 0 0 1-16.453818-6.818909l-442.181818-442.158545a23.202909 23.202909 0 0 1 0-32.907636l442.181818-442.205091a23.249455 23.249455 0 1 1 32.907636 32.907636L323.816727 512.023273l425.728 425.704727A23.249455 23.249455 0 0 1 733.090909 977.454545z"
                        fill="" p-id="2341"></path>
                </svg>
            </div>

            <div class="mycode-main">

                <div class="top">
                    <p>
                        <span style="font-size: 32px;color: #000; font-weight: bold;">验证码登录</span>
                    </p>
                    <p><span style="font-size: 13px;color: #999;">未注册的手机号验证后自动完成注册</span></p>
                </div>

                <div class="login-content">


                    <van-cell-group inset>
                        <van-field type="tel" v-model="tel" label="手机号" />
                        <van-field center clearable label="短信验证码" v-model="code" placeholder="请输入短信验证码"
                            class="van-field--center-button">
                            <template #button>
                                <van-button size="small" @click="codeClick">{{ codeText }}</van-button>
                            </template>
                        </van-field>
                        <button class="login-button" @click="loginClick">登录</button>
                    </van-cell-group>

                </div>
            </div>
        </header>

        <footer class="loginfooter">
            <div class="content-other">
                <p style="color: #999;font-size: 13px;">其他登录方式</p>
                <div class="content-other-image">
                    <van-image
                        src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84_%E6%9C%AA%E7%99%BB%E5%BD%95/u321.svg"></van-image>
                    <van-image
                        src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84_%E6%9C%AA%E7%99%BB%E5%BD%95/u322.svg"></van-image>
                </div>
            </div>

            <div class="content-bottom">
                <span><van-checkbox name="b" icon-size="10px" v-model:model-value="checked"></van-checkbox> <span
                        style="color:#999999;">我已阅读并同意</span></span><span
                    style="color:#3478F6;">《中国移动认证服务条款》,《服务协议》</span><span style="color:#999999;">和</span><span
                    style="color:#3478F6;">《个人信息保护指引》</span>
            </div>
        </footer>

    </div>
</template>

<style scoped lang="scss">
.codelogin {
    width: 100%;
    height: 660px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .mycode-back {
        .back {
            margin-left: 10px;
            margin-top: 30px;
        }

        .mycode-main {
            .top {
                margin-left: 20px;
                margin-top: 20px;
            }

            .login-content {
                margin-top: 50px;

                .van-field--center-button {
                    margin: 30px 0;
                }

                .login-button {
                    background: linear-gradient(90deg, rgba(52, 120, 246, 1) 0%, rgba(2, 167, 240, 1) 99%);
                    width: 300px;
                    height: 45px;
                    border-radius: 10px;
                    color: #fff;
                    border: 0;
                    margin-left: 20px;
                }
            }
        }
    }

    .loginfooter {
        width: 100%;
        margin: 0 auto;
        text-align: center;

        .content-other {
            width: 25%;
            margin: 0 auto;

            .content-other-image {
                width: 100%;
                display: flex;
                justify-content: space-between;
            }
        }

        .content-bottom {
            width: 65%;
            margin: 20px 0;
            margin: 20px auto;

            .van-checkbox {
                position: relative;
                top: 10px;
                right: 10px;
            }
        }
    }
}
</style>